<template>
  <view class="ai-waterfall-item">
    <image :src="image" mode="widthFix" class="item-img" :class="{'item-img-only': !showTitle}" />
    <view class="item-info" v-if="showTitle">
      <image v-if="avatar" :src="avatar" mode="aspectFill" class="info-avatar" />
      <view v-if="title" class="info-title">{{ title }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "ai-waterfall-item",
    props: {
      image: String,
      avatar: String,
      title: String
    },
    data() {
      return {

      };
    },
    computed: {
      showTitle() {
        return this.avatar || this.title
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-waterfall-item {
    background: var(--white);
    overflow: hidden;
    border-radius: $gutter * 0.5;
    display: flex;
    flex-direction: column;
    
    .item-img {
      width: 100%;
      
      &.item-img-only {
        border-radius: $gutter * 0.5;
      }
    }
    
    .item-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: $gutter * 0.5;
    }
    
    .info-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: $gutter * 0.5;
    }
    
    .info-title {
      font-size: $font-size-md;
      color: $gray-dark;
    }
  }

</style>